<style type="text/less" lang="less" scoped>
  @import url("./index.less");
</style>

<template>
  <div class="ps-panel" style="height: 100%">
    <div class="ps-panel-head">
      <i class="ps-panel-head-icon iconfont icon-list"></i>
      <span class="ps-panel-head-title">数据列表</span>
    </div>

    <div class="ps-panel-body">
      <el-container style="height: 100%">
        <el-aside width="300px" class="content-left-list">
          <div class="left-list" v-loading="isloading">
            <el-checkbox-group v-model="checkList">
              <el-checkbox :label="node.id" :key="node.id" v-for="node in nodeList">
                <p class="subclass-list">ID：{{ node.id }}</p>
                <p class="subclass-detail" :title="node.name">
                  <i class="iconfont icon-user"></i>{{ node.name }}
                </p>
              </el-checkbox>
            </el-checkbox-group>
          </div>
          <div class="pagination">
            <el-pagination small :page-size="paginations.pageSize" :layout="paginations.layout"
              :total="paginations.total" :current-page="paginations.pageIndex" :pager-count="5" @current-change="jump"
              style="text-align: center">
            </el-pagination>
          </div>

          <div class="content-left-action">
            <button @click="cancelSel" ref="node_all_check">全选</button>
            <button class="left-action-activate" @click="importNode">
              读取
            </button>
          </div>
        </el-aside>
        <el-main style="position: relative; padding: 0">
          <div ref="details_info"></div>
          <el-button type="primary" style="
              position: absolute;
              right: 10px;
              bottom: 10px;
              background-color: #3579f8;
            " @click="saveNode">导入</el-button>
        </el-main>
      </el-container>
    </div>

    <el-dialog title="情报整合" :visible.sync="dialogVisible" @open="htInit2" width="50%">
      <el-container>
        <el-main style="padding: 0; height: 400px">
          <el-main ref="details_infos" style="position: relative; padding: 0; height: calc(100% - 60px)">
          </el-main>
          <el-footer>
            <span class="dialog-footer">
              <el-button @click="mergeNode" type="success">拼 合</el-button>
            </span>
          </el-footer>
        </el-main>
        <el-aside width="200px" style="background-color: #eee">
          <div class="grid-content bg-purple-light">
            <el-menu default-active="1">
              <el-menu-item-group>
                <span slot="title">冲突属性</span>
                <el-menu-item index="1">
                  <span slot="title">舰长</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-menu>
          </div>
        </el-aside>
      </el-container>
    </el-dialog>
  </div>
</template>

<script>
  import Vue from "vue";

  export default {
    name: "database",
    data() {
      return {
        isCollapse: false,
        nodeList: [],
        checkList: [],
        htData: [],
        dialogVisible: false,
        selNode: {},
        paginations: {
          pageIndex: 1, // 当前位于哪页
          pageSize: 50, // 页显示多少条
          total: 0, // 总数
          layout: "total, prev, pager, next", // 翻页属性
        },
        isloading: false,
      };
    },
    watch: {
      $route: function () {
        this.checkList = [];
        this.$refs.details_info.innerHTML = "";
        this.jump(1);
      },
    },
    methods: {
      cancelSel() {
        const node_all_check = this.$refs.node_all_check;
        if (node_all_check.innerHTML == "全选") {
          this.nodeList.forEach((item) => {
            this.checkList.push(item.id);
          });
          node_all_check.innerHTML = "取消";
        } else {
          this.checkList = [];
          node_all_check.innerHTML = "全选";
        }
      },
      importNode() {
        let $this = this;
        this.$store.dispatch("ajaxSetting", {
          // this.$store.dispatch('ajax', {
          url: "/zonghe/api/comparison/queryComparisonDate",
          method: "post",
          data: {
            dicLabelAttId: Number.parseInt(this.$route.query.dicLabelAttId),
            idList: this.checkList,
          },
          succeed: function (res) {
            console.log(res);
            $this.htData = [];
            // $this.htData.push({
            //     id: 1,
            //     name:'111',
            //     state:1,
            //     property:{
            //         '研发单位': {state: 1, value: '研发单位'},
            //     }
            // });

            res.rows.forEach(function (item) {
              console.log(item);
              let entity = {};
              // let ignoreField = ['id', 'name', 'node', 'firstTitle', 'secondTitle', 'title', 'remark', 'introduce', 'imageRight', 'imageLeft', 'website'];

              entity["id"] = item.id;
              entity["name"] = item.name;
              entity["labelName"] = item.labelName;
              entity["state"] = item.status;
              entity["calsssPropertyList"] = item.calsssPropertyList;
              entity["property"] = {};
              entity["RelationshipNode"] = [];

              for (let key in item.calsssPropertyList) {
                let item2 = item.calsssPropertyList[key];

                // if (ignoreField.indexOf(key) !== -1) {
                //     continue;
                // }
                entity["property"][item2.name] = {
                  state: item2.status,
                  value: item2.value,
                  name: item2.name,
                };
              }

              // item.repositoryNeo4j.forEach(function (item2) {
              //     let RelationshipNode = {
              //         // id: item2.id.value,
              //         name: item2['名称'],
              //         state: item2.status,
              //         property: []
              //     };
              //     for (let key in item2) {
              //         let item3 = item2[key];
              //
              //         // if (ignoreField.indexOf(key) !== -1) {
              //         //     continue;
              //         // }
              //         RelationshipNode['property'][key] = {value: item3};
              //     }
              //     entity['RelationshipNode'].push(RelationshipNode);
              // });

              $this.htData.push(entity);
            });

            $this.htInit();
          },
        });
      },
      mergeNode() {
        let node = this.htData[this.selNode];

        for (let key in node.property) {
          let item = node.property[key];
          if (item.state == 4) {
            item.state = 3;
            item.value = node.property[key].value[0];
          }
        }

        this.htInit();
        this.dialogVisible = false;
      },
      htInit() {
        let $this = this;
        new ht.Node();
        let nodes = {
          v: "6.1.5",
          p: {
            autoAdjustIndex: true,
            hierarchicalRendering: false,
          },
          d: [],
        };

        let form = new ht.widget.FormPane();
        form.setWidth(100);
        form.setHeight(125);
        form.setRowHeight(18);
        let formView = form.getView();
        let details_info = this.$refs.details_info;
        details_info.innerHTML = "";
        details_info.appendChild(formView); //将表单添加进body中
        formView.style.top = "0px"; //ht组件几乎都设置绝对路径
        formView.style.left = "0px";
        let legend = [{
            name: "新增实体",
            color: "rgb(52,119,248)"
          },
          {
            name: "新增属性",
            color: "rgb(23,217,156)"
          },
          {
            name: "已有实体",
            color: "rgb(249,200,82)"
          },
          {
            name: "关联实体",
            color: "rgb(242,156,177)"
          },
          {
            name: "冲突",
            color: "rgb(241,77,104)"
          },
        ];

        // legend.forEach(function (item) {
        //   form.addRow(
        //     [
        //       //向表单中添加行
        //       {
        //         //这一行中的第一个表单项
        //         button: {
        //           //向表单中添加button按钮
        //           icon: {
        //             width: 16,
        //             height: 16,
        //             comps: [{
        //               type: "oval",
        //               background: item.color,
        //               borderColor: "#979797",
        //               // "rect": [4,0,16,16]
        //             }, ],
        //           }, //设置按钮的图标
        //           background: "", //设置按钮的背景
        //           borderColor: "", //设置按钮的边框颜色
        //         },
        //       },
        //       {
        //         element: item.name,
        //         font: "bold 12px arial, sans-serif",
        //         color: "#000",
        //         align: "left",
        //       },
        //     ],
        //     [0.1, 0.2]
        //   ); //第二个参数是设置第一参数中的数组的宽度，小于1是比例，大于1是实际宽度。第三个参数是该行的高度
        // });

        let dataModel = new ht.DataModel();
        let graphView = new ht.graph.GraphView(dataModel);
        let view = graphView.getView();
        let moveXY = 0;
        view.className = "main";

        details_info.appendChild(view);
        let style = graphView.getView().style;
        style.left = "0";
        style.top = "0";
        style.right = "0";
        style.bottom = "0";

        // view.addEventListener('click', function (e) {
        //     if (moveXY === 0 && $(e.target).hasClass('system-red')) {
        //         $this.dialogVisible = true;
        //         $this.selNode = $(e.target).attr('data-index');
        //     }
        //     moveXY = 0;
        // });
        view.addEventListener("mousedown", function (e) {
          moveXY = e.clientX + e.clientY;
        });
        view.addEventListener("mouseup", function (e) {
          moveXY -= moveXY === 0 ? 0 : e.clientX + e.clientY;
        });

        let no = 1;
        this.htData.forEach(function (entity, index) {
          let nodeColor = "";
          let nodeIcon = "";
         console.log(entity);
          switch (entity.state) {
            // case 1:
            //   nodeColor = "system-blue";
            //   break;
            // case 2:
            //   nodeColor = "system-yellow";
            //   break;
              case 0:
                  nodeColor = 'system-pink';
                  break;
              case 1:
                  nodeColor = 'system-blue';
                  break;
              case 2:
                  nodeColor = 'system-green';
                  break;
              case 3:
                  nodeColor = 'system-yellow';
                  break;
              case 4:
                  nodeColor = 'system-red';
                  break;
          }
          console.log(nodeColor)
          switch ($this.$route.query.tableName) {
            case "舰艇":
              nodeIcon = "icon-logistics";
              break;
            case "火炮":
              nodeIcon = "icon-jinangaopao";
              break;
            default:
              nodeIcon = "icon-jinangaopao";
              break;
          }
          let node = {
            c: "ht.HtmlNode",
            i: no++,
            p: {
            //   name: entity.name,
              html: `<div class="system ${nodeColor}" title="${entity.name}">${entity.name}</div>`,
            //   html: `<div class="system ${nodeColor}"><i class="iconfont ${nodeIcon}"></i></div>`,
            },
            s: {
              "label.font": "8px Aria",
            },
          };
          nodes.d.push(node);

          for (let key in entity["property"]) {
            const property = entity["property"][key];

            if (property.value == undefined) {
              continue;
            }
            let propertyColor = "";
            switch (property.state) {
              case 1:
                propertyColor = "system-green";
                break;
              case 3:
                propertyColor = "system-red";
                break;
                // case 0:
                //     nodeColor = 'system-pink';
                //     break;
                // case 1:
                //     propertyColor = 'system-blue';
                //     break;
                // case 2:
                //     propertyColor = 'system-green';
                //     break;
                // case 3:
                //     propertyColor = 'system-yellow';
                //     break;
                // case 4:
                //     propertyColor = 'system-red';
                //     break;
            }

            if (property.state != 2) {
              let propertyNode = {
                c: "ht.HtmlNode",
                i: no++,
                p: {
                  html: `<div class="system system-property ${propertyColor}" data-index="${index}" title="${property.value}">${property.value}</div>`,
                },
              };
              nodes.d.push(propertyNode);

              let edge = {
                c: "ht.Edge",
                i: no++,
                p: {
                  source: {
                    __i: node.i,
                  },
                  target: {
                    __i: propertyNode.i,
                  },
                },
                s: {
                  label: key,
                  "label.color": "gray",
                  "label.font": "6px arial",
                  "edge.width": 0.5,
                  "edge.color": "gray",
                  icons: {
                    toArrow: {
                      position: 19,
                      keepOrien: true,
                      width: 30,
                      height: 15,
                      names: ["toArrow"],
                    },
                  },
                },
              };
              nodes.d.push(edge);
            }
          }

          entity["RelationshipNode"].forEach(function (item) {
            let relColor = "system-pink";

            switch (item.state) {
                case 0:
                    relColor = 'system-pink';
                    break;
                case 1:
                    relColor = 'system-blue';
                    break;
                case 2:
                    relColor = 'system-green';
                    break;
                case 3:
                    relColor = 'system-yellow';
                    break;
                case 4:
                    relColor = 'system-red';
                    break;
            }

            let node2 = {
              c: "ht.HtmlNode",
              i: no++,
              p: {
                name: item.name,
                html: `<div class="system ${relColor}"><i class="iconfont icon-taikongmanbuyi"></i></div>`,
              },
              s: {
                "label.font": "8px Aria",
              },
            };
            nodes.d.push(node2);

            let edgeRel = {
              c: "ht.Edge",
              i: no++,
              p: {
                source: {
                  __i: node.i,
                },
                target: {
                  __i: node2.i,
                },
              },
              s: {
                "label.color": "gray",
                "label.font": "6px arial",
                "edge.width": 0.5,
                "edge.color": "gray",
                icons: {
                  toArrow: {
                    position: 19,
                    keepOrien: true,
                    width: 30,
                    height: 15,
                    names: ["toArrow"],
                  },
                },
              },
            };
            nodes.d.push(edgeRel);

            for (let key in item["property"]) {
              const property = item["property"][key];

              if (property.value == undefined) {
                continue;
              }

              // let propertyColor = '';
              // switch (property.state) {
              //     case 0: nodeColor = 'system-pink'; break;
              //     case 1: propertyColor = 'system-blue'; break;
              //     case 2: propertyColor = 'system-green'; break;
              //     case 3: propertyColor = 'system-yellow'; break;
              //     case 4: propertyColor = 'system-red'; break;
              // }

              let propertyNode = {
                c: "ht.HtmlNode",
                i: no++,
                p: {
                  html: `<div class="system system-property ${relColor}" title="${property.value}">${property.value}</div>`,
                },
              };
              nodes.d.push(propertyNode);

              let edge = {
                c: "ht.Edge",
                i: no++,
                p: {
                  source: {
                    __i: node2.i,
                  },
                  target: {
                    __i: propertyNode.i,
                  },
                },
                s: {
                  label: key,
                  "label.color": "gray",
                  "label.font": "6px arial",
                  "edge.width": 0.5,
                  "edge.color": "gray",
                  icons: {
                    toArrow: {
                      position: 19,
                      keepOrien: true,
                      width: 30,
                      height: 15,
                      names: ["toArrow"],
                    },
                  },
                },
              };
              nodes.d.push(edge);
            }
          });
        });

        graphView.dm().deserialize(nodes);
        let autoLayout = new ht.layout.AutoLayout(graphView);
        autoLayout.setAnimate(true);
        autoLayout.layout("circular", function () {
          graphView.fitContent(true);
        });

        // console.log(JSON.stringify(nodes),111);
      },
      htInit2() {
        let $this = this;
        Vue.nextTick(function () {
          let details_info = $this.$refs.details_infos.$el;
          let dataModel = new ht.DataModel(),
            graphView = new ht.graph.GraphView(dataModel);
          let view = graphView.getView();
          view.className = "main";
          details_info.innerHTML = "";
          details_info.appendChild(view);

          let style = graphView.getView().style;
          style.left = "0";
          style.top = "0";
          style.right = "0";
          style.bottom = "0";

          let htData = {
            v: "6.1.5",
            p: {
              autoAdjustIndex: true,
              hierarchicalRendering: false,
            },
            d: [{
                c: "ht.HtmlNode",
                i: 1,
                p: {
                  name: "1986式100毫米反坦克炮",
                  html: '<div class="system system-yellow"></div>',
                //   html: '<div class="system system-yellow"><i class="iconfont icon-jinangaopao"></i></div>',
                },
                s: {
                  "label.font": "8px Aria",
                },
              },
              {
                c: "ht.HtmlNode",
                i: 2,
                p: {
                  html: '<div class="system system-property system-yellow" data-index="0" title="20世纪80年代初期">20世纪80年代初期</div>',
                },
              },
              {
                c: "ht.Edge",
                i: 3,
                p: {
                  source: {
                    __i: 1,
                  },
                  target: {
                    __i: 2,
                  },
                },
                s: {
                  label: "研发时间",
                  "label.color": "gray",
                  "label.font": "6px arial",
                  "edge.width": 0.5,
                  "edge.color": "gray",
                  icons: {
                    toArrow: {
                      position: 19,
                      keepOrien: true,
                      width: 30,
                      height: 15,
                      names: ["toArrow"],
                    },
                  },
                },
              },
              {
                c: "ht.HtmlNode",
                i: 4,
                p: {
                  html: '<div class="system system-property system-yellow" data-index="0" title="中口径炮">中口径炮</div>',
                },
              },
              {
                c: "ht.Edge",
                i: 5,
                p: {
                  source: {
                    __i: 1,
                  },
                  target: {
                    __i: 4,
                  },
                },
                s: {
                  label: "口径",
                  "label.color": "gray",
                  "label.font": "6px arial",
                  "edge.width": 0.5,
                  "edge.color": "gray",
                  icons: {
                    toArrow: {
                      position: 19,
                      keepOrien: true,
                      width: 30,
                      height: 15,
                      names: ["toArrow"],
                    },
                  },
                },
              },
              {
                c: "ht.HtmlNode",
                i: 6,
                p: {
                  html: '<div class="system system-property system-yellow" data-index="0" title="13,705米">13,705米</div>',
                },
              },
              {
                c: "ht.Edge",
                i: 7,
                p: {
                  source: {
                    __i: 1,
                  },
                  target: {
                    __i: 6,
                  },
                },
                s: {
                  label: "最大射程",
                  "label.color": "gray",
                  "label.font": "6px arial",
                  "edge.width": 0.5,
                  "edge.color": "gray",
                  icons: {
                    toArrow: {
                      position: 19,
                      keepOrien: true,
                      width: 30,
                      height: 15,
                      names: ["toArrow"],
                    },
                  },
                },
              },
              {
                c: "ht.HtmlNode",
                i: 8,
                p: {
                  html: '<div class="system system-property system-yellow" data-index="0" title="9,520毫米">9,520毫米</div>',
                },
              },
              {
                c: "ht.Edge",
                i: 9,
                p: {
                  source: {
                    __i: 1,
                  },
                  target: {
                    __i: 8,
                  },
                },
                s: {
                  label: "炮管长度",
                  "label.color": "gray",
                  "label.font": "6px arial",
                  "edge.width": 0.5,
                  "edge.color": "gray",
                  icons: {
                    toArrow: {
                      position: 19,
                      keepOrien: true,
                      width: 30,
                      height: 15,
                      names: ["toArrow"],
                    },
                  },
                },
              },
              {
                c: "ht.HtmlNode",
                i: 10,
                p: {
                  html: '<div class="system system-property system-red" data-index="0" title="中国北方工业公司">中国北方工业公司</div>',
                },
                a: {
                  state: 4,
                },
              },
              {
                c: "ht.Edge",
                i: 11,
                p: {
                  source: {
                    __i: 1,
                  },
                  target: {
                    __i: 10,
                  },
                },
                s: {
                  label: "研发单位",
                  "label.color": "gray",
                  "label.font": "6px arial",
                  "edge.width": 0.5,
                  "edge.color": "gray",
                  icons: {
                    toArrow: {
                      position: 19,
                      keepOrien: true,
                      width: 30,
                      height: 15,
                      names: ["toArrow"],
                    },
                  },
                },
              },
              {
                c: "ht.HtmlNode",
                i: 12,
                p: {
                  html: '<div class="system system-property system-yellow" data-index="0" title="3,610千克">3,610千克</div>',
                },
              },
              {
                c: "ht.Edge",
                i: 13,
                p: {
                  source: {
                    __i: 1,
                  },
                  target: {
                    __i: 12,
                  },
                },
                s: {
                  label: "总重",
                  "label.color": "gray",
                  "label.font": "6px arial",
                  "edge.width": 0.5,
                  "edge.color": "gray",
                  icons: {
                    toArrow: {
                      position: 19,
                      keepOrien: true,
                      width: 30,
                      height: 15,
                      names: ["toArrow"],
                    },
                  },
                },
              },
              {
                c: "ht.HtmlNode",
                i: 14,
                p: {
                  html: '<div class="system system-property system-red" data-index="0" title="800米/秒">800米/秒</div>',
                },
                a: {
                  state: 4,
                },
              },
              {
                c: "ht.Edge",
                i: 15,
                p: {
                  source: {
                    __i: 1,
                  },
                  target: {
                    __i: 14,
                  },
                },
                s: {
                  label: "炮口初速",
                  "label.color": "gray",
                  "label.font": "6px arial",
                  "edge.width": 0.5,
                  "edge.color": "gray",
                  icons: {
                    toArrow: {
                      position: 19,
                      keepOrien: true,
                      width: 30,
                      height: 15,
                      names: ["toArrow"],
                    },
                  },
                },
              },

              {
                c: "ht.HtmlNode",
                i: 1000001,
                p: {
                  name: "1986式100毫米反坦克炮",
                  html: '<div class="system system-yellow"></div>',
                //   html: '<div class="system system-yellow"><i class="iconfont icon-jinangaopao"></i></div>',
                },
                s: {
                  "label.font": "8px Aria",
                },
              },
              {
                c: "ht.HtmlNode",
                i: 1000002,
                p: {
                  html: '<div class="system system-property system-yellow" data-index="0" title="20世纪80年代初期">20世纪80年代初期</div>',
                },
              },
              {
                c: "ht.Edge",
                i: 1000003,
                p: {
                  source: {
                    __i: 1000001,
                  },
                  target: {
                    __i: 1000002,
                  },
                },
                s: {
                  label: "研发时间",
                  "label.color": "gray",
                  "label.font": "6px arial",
                  "edge.width": 0.5,
                  "edge.color": "gray",
                  icons: {
                    toArrow: {
                      position: 19,
                      keepOrien: true,
                      width: 30,
                      height: 15,
                      names: ["toArrow"],
                    },
                  },
                },
              },
              {
                c: "ht.HtmlNode",
                i: 1000004,
                p: {
                  html: '<div class="system system-property system-yellow" data-index="0" title="中口径炮">中口径炮</div>',
                },
              },
              {
                c: "ht.Edge",
                i: 1000005,
                p: {
                  source: {
                    __i: 1000001,
                  },
                  target: {
                    __i: 1000004,
                  },
                },
                s: {
                  label: "口径",
                  "label.color": "gray",
                  "label.font": "6px arial",
                  "edge.width": 0.5,
                  "edge.color": "gray",
                  icons: {
                    toArrow: {
                      position: 19,
                      keepOrien: true,
                      width: 30,
                      height: 15,
                      names: ["toArrow"],
                    },
                  },
                },
              },
              {
                c: "ht.HtmlNode",
                i: 1000006,
                p: {
                  html: '<div class="system system-property system-yellow" data-index="0" title="13,705米">13,705米</div>',
                },
              },
              {
                c: "ht.Edge",
                i: 1000007,
                p: {
                  source: {
                    __i: 1000001,
                  },
                  target: {
                    __i: 1000006,
                  },
                },
                s: {
                  label: "最大射程",
                  "label.color": "gray",
                  "label.font": "6px arial",
                  "edge.width": 0.5,
                  "edge.color": "gray",
                  icons: {
                    toArrow: {
                      position: 19,
                      keepOrien: true,
                      width: 30,
                      height: 15,
                      names: ["toArrow"],
                    },
                  },
                },
              },
              {
                c: "ht.HtmlNode",
                i: 1000008,
                p: {
                  html: '<div class="system system-property system-yellow" data-index="0" title="9,520毫米">9,520毫米</div>',
                },
              },
              {
                c: "ht.Edge",
                i: 1000009,
                p: {
                  source: {
                    __i: 1000001,
                  },
                  target: {
                    __i: 1000008,
                  },
                },
                s: {
                  label: "炮管长度",
                  "label.color": "gray",
                  "label.font": "6px arial",
                  "edge.width": 0.5,
                  "edge.color": "gray",
                  icons: {
                    toArrow: {
                      position: 19,
                      keepOrien: true,
                      width: 30,
                      height: 15,
                      names: ["toArrow"],
                    },
                  },
                },
              },
              {
                c: "ht.HtmlNode",
                i: 10000010,
                p: {
                  html: '<div class="system system-property system-red" data-index="0" title="北方工业">北方工业</div>',
                },
                a: {
                  state: 4,
                },
              },
              {
                c: "ht.Edge",
                i: 10000011,
                p: {
                  source: {
                    __i: 1000001,
                  },
                  target: {
                    __i: 10000010,
                  },
                },
                s: {
                  label: "研发单位",
                  "label.color": "gray",
                  "label.font": "6px arial",
                  "edge.width": 0.5,
                  "edge.color": "gray",
                  icons: {
                    toArrow: {
                      position: 19,
                      keepOrien: true,
                      width: 30,
                      height: 15,
                      names: ["toArrow"],
                    },
                  },
                },
              },
              {
                c: "ht.HtmlNode",
                i: 10000012,
                p: {
                  html: '<div class="system system-property system-yellow" data-index="0" title="3,610千克">3,610千克</div>',
                },
              },
              {
                c: "ht.Edge",
                i: 10000013,
                p: {
                  source: {
                    __i: 1000001,
                  },
                  target: {
                    __i: 10000012,
                  },
                },
                s: {
                  label: "总重",
                  "label.color": "gray",
                  "label.font": "6px arial",
                  "edge.width": 0.5,
                  "edge.color": "gray",
                  icons: {
                    toArrow: {
                      position: 19,
                      keepOrien: true,
                      width: 30,
                      height: 15,
                      names: ["toArrow"],
                    },
                  },
                },
              },
              {
                c: "ht.HtmlNode",
                i: 10000014,
                p: {
                  html: '<div class="system system-property system-red" data-index="0" title="900米/秒">900米/秒</div>',
                },
                a: {
                  state: 4,
                },
              },
              {
                c: "ht.Edge",
                i: 10000015,
                p: {
                  source: {
                    __i: 1000001,
                  },
                  target: {
                    __i: 10000014,
                  },
                },
                s: {
                  label: "炮口初速",
                  "label.color": "gray",
                  "label.font": "6px arial",
                  "edge.width": 0.5,
                  "edge.color": "gray",
                  icons: {
                    toArrow: {
                      position: 19,
                      keepOrien: true,
                      width: 30,
                      height: 15,
                      names: ["toArrow"],
                    },
                  },
                },
              },
            ],
          };

          if ($this.$route.query.tableName == "jcjt") {
            htData = {
              v: "6.1.5",
              p: {
                autoAdjustIndex: true,
                hierarchicalRendering: false,
              },
              d: [{
                  c: "ht.HtmlNode",
                  i: 1,
                  p: {
                    name: "辽宁舰",
                    html: '<div class="system system-yellow"><i class="iconfont icon-logistics"></i></div>',
                  },
                  s: {
                    "label.font": "8px Aria",
                  },
                },
                {
                  c: "ht.HtmlNode",
                  i: 2,
                  p: {
                    html: '<div class="system system-property system-red" data-index="0" title="304.5米">304.5米</div>',
                  },
                  a: {
                    state: 4,
                  },
                },
                {
                  c: "ht.Edge",
                  i: 3,
                  p: {
                    source: {
                      __i: 1,
                    },
                    target: {
                      __i: 2,
                    },
                  },
                  s: {
                    label: "舰长",
                    "label.color": "gray",
                    "label.font": "6px arial",
                    "edge.width": 0.5,
                    "edge.color": "gray",
                    icons: {
                      toArrow: {
                        position: 19,
                        keepOrien: true,
                        width: 30,
                        height: 15,
                        names: ["toArrow"],
                      },
                    },
                  },
                },
                {
                  c: "ht.HtmlNode",
                  i: 4,
                  p: {
                    html: '<div class="system system-property system-yellow" data-index="0" title="2012年9月25日">2012年9月25日</div>',
                  },
                },
                {
                  c: "ht.Edge",
                  i: 5,
                  p: {
                    source: {
                      __i: 1,
                    },
                    target: {
                      __i: 4,
                    },
                  },
                  s: {
                    label: "服役时间",
                    "label.color": "gray",
                    "label.font": "6px arial",
                    "edge.width": 0.5,
                    "edge.color": "gray",
                    icons: {
                      toArrow: {
                        position: 19,
                        keepOrien: true,
                        width: 30,
                        height: 15,
                        names: ["toArrow"],
                      },
                    },
                  },
                },
                {
                  c: "ht.HtmlNode",
                  i: 6,
                  p: {
                    html: '<div class="system system-property system-yellow" data-index="0" title="1988年12月4日">1988年12月4日</div>',
                  },
                },
                {
                  c: "ht.Edge",
                  i: 7,
                  p: {
                    source: {
                      __i: 1,
                    },
                    target: {
                      __i: 6,
                    },
                  },
                  s: {
                    label: "下水时间",
                    "label.color": "gray",
                    "label.font": "6px arial",
                    "edge.width": 0.5,
                    "edge.color": "gray",
                    icons: {
                      toArrow: {
                        position: 19,
                        keepOrien: true,
                        width: 30,
                        height: 15,
                        names: ["toArrow"],
                      },
                    },
                  },
                },
                {
                  c: "ht.HtmlNode",
                  i: 8,
                  p: {
                    html: '<div class="system system-property system-yellow" data-index="0" title="29节">29节</div>',
                  },
                },
                {
                  c: "ht.Edge",
                  i: 9,
                  p: {
                    source: {
                      __i: 1,
                    },
                    target: {
                      __i: 8,
                    },
                  },
                  s: {
                    label: "航速",
                    "label.color": "gray",
                    "label.font": "6px arial",
                    "edge.width": 0.5,
                    "edge.color": "gray",
                    icons: {
                      toArrow: {
                        position: 19,
                        keepOrien: true,
                        width: 30,
                        height: 15,
                        names: ["toArrow"],
                      },
                    },
                  },
                },
                {
                  c: "ht.HtmlNode",
                  i: 10,
                  p: {
                    html: '<div class="system system-property system-yellow" data-index="0" title="瓦良格号">瓦良格号</div>',
                  },
                },
                {
                  c: "ht.Edge",
                  i: 11,
                  p: {
                    source: {
                      __i: 1,
                    },
                    target: {
                      __i: 10,
                    },
                  },
                  s: {
                    label: "前型",
                    "label.color": "gray",
                    "label.font": "6px arial",
                    "edge.width": 0.5,
                    "edge.color": "gray",
                    icons: {
                      toArrow: {
                        position: 19,
                        keepOrien: true,
                        width: 30,
                        height: 15,
                        names: ["toArrow"],
                      },
                    },
                  },
                },
                {
                  c: "ht.HtmlNode",
                  i: 12,
                  p: {
                    html: '<div class="system system-property system-yellow" data-index="0" title="尼古拉耶夫造船厂，大连造船厂">尼古拉耶夫造船厂，大连造船厂</div>',
                  },
                },
                {
                  c: "ht.Edge",
                  i: 13,
                  p: {
                    source: {
                      __i: 1,
                    },
                    target: {
                      __i: 12,
                    },
                  },
                  s: {
                    label: "制造厂",
                    "label.color": "gray",
                    "label.font": "6px arial",
                    "edge.width": 0.5,
                    "edge.color": "gray",
                    icons: {
                      toArrow: {
                        position: 19,
                        keepOrien: true,
                        width: 30,
                        height: 15,
                        names: ["toArrow"],
                      },
                    },
                  },
                },
                {
                  c: "ht.HtmlNode",
                  i: 14,
                  p: {
                    html: '<div class="system system-property system-yellow" data-index="0" title="50000吨以上">50000吨以上</div>',
                  },
                },
                {
                  c: "ht.Edge",
                  i: 15,
                  p: {
                    source: {
                      __i: 1,
                    },
                    target: {
                      __i: 14,
                    },
                  },
                  s: {
                    label: "满排吨位",
                    "label.color": "gray",
                    "label.font": "6px arial",
                    "edge.width": 0.5,
                    "edge.color": "gray",
                    icons: {
                      toArrow: {
                        position: 19,
                        keepOrien: true,
                        width: 30,
                        height: 15,
                        names: ["toArrow"],
                      },
                    },
                  },
                },
                {
                  c: "ht.HtmlNode",
                  i: 16,
                  p: {
                    html: '<div class="system system-property system-yellow" data-index="0" title="75米">75米</div>',
                  },
                },
                {
                  c: "ht.Edge",
                  i: 17,
                  p: {
                    source: {
                      __i: 1,
                    },
                    target: {
                      __i: 16,
                    },
                  },
                  s: {
                    label: "型宽",
                    "label.color": "gray",
                    "label.font": "6px arial",
                    "edge.width": 0.5,
                    "edge.color": "gray",
                    icons: {
                      toArrow: {
                        position: 19,
                        keepOrien: true,
                        width: 30,
                        height: 15,
                        names: ["toArrow"],
                      },
                    },
                  },
                },
                {
                  c: "ht.HtmlNode",
                  i: 18,
                  p: {
                    html: '<div class="system system-property system-yellow" data-index="0" title="被中国改装后现在中国人民解放军海军服役">被中国改装后现在中国人民解放军海军服役</div>',
                  },
                },
                {
                  c: "ht.Edge",
                  i: 19,
                  p: {
                    source: {
                      __i: 1,
                    },
                    target: {
                      __i: 18,
                    },
                  },
                  s: {
                    label: "现状",
                    "label.color": "gray",
                    "label.font": "6px arial",
                    "edge.width": 0.5,
                    "edge.color": "gray",
                    icons: {
                      toArrow: {
                        position: 19,
                        keepOrien: true,
                        width: 30,
                        height: 15,
                        names: ["toArrow"],
                      },
                    },
                  },
                },
                {
                  c: "ht.HtmlNode",
                  i: 20,
                  p: {
                    html: '<div class="system system-property system-green" data-index="0" title="1985年12月6日">1985年12月6日</div>',
                  },
                },
                {
                  c: "ht.Edge",
                  i: 21,
                  p: {
                    source: {
                      __i: 1,
                    },
                    target: {
                      __i: 20,
                    },
                  },
                  s: {
                    label: "建造时间",
                    "label.color": "gray",
                    "label.font": "6px arial",
                    "edge.width": 0.5,
                    "edge.color": "gray",
                    icons: {
                      toArrow: {
                        position: 19,
                        keepOrien: true,
                        width: 30,
                        height: 15,
                        names: ["toArrow"],
                      },
                    },
                  },
                },
                {
                  c: "ht.HtmlNode",
                  i: 1000001,
                  p: {
                    name: "辽宁舰 (图数据库)",
                    html: '<div class="system system-yellow"><i class="iconfont icon-logistics"></i></div>',
                  },
                  s: {
                    "label.font": "8px Aria",
                  },
                },
                {
                  c: "ht.HtmlNode",
                  i: 1000002,
                  p: {
                    html: '<div class="system system-property system-red" data-index="0" title="304米">304米</div>',
                  },
                  a: {
                    state: 4,
                  },
                },
                {
                  c: "ht.Edge",
                  i: 1000003,
                  p: {
                    source: {
                      __i: 1000001,
                    },
                    target: {
                      __i: 1000002,
                    },
                  },
                  s: {
                    label: "舰长",
                    "label.color": "gray",
                    "label.font": "6px arial",
                    "edge.width": 0.5,
                    "edge.color": "gray",
                    icons: {
                      toArrow: {
                        position: 19,
                        keepOrien: true,
                        width: 30,
                        height: 15,
                        names: ["toArrow"],
                      },
                    },
                  },
                },
                {
                  c: "ht.HtmlNode",
                  i: 1000004,
                  p: {
                    html: '<div class="system system-property system-yellow" data-index="0" title="2012年9月25日">2012年9月25日</div>',
                  },
                },
                {
                  c: "ht.Edge",
                  i: 1000005,
                  p: {
                    source: {
                      __i: 1000001,
                    },
                    target: {
                      __i: 1000004,
                    },
                  },
                  s: {
                    label: "服役时间",
                    "label.color": "gray",
                    "label.font": "6px arial",
                    "edge.width": 0.5,
                    "edge.color": "gray",
                    icons: {
                      toArrow: {
                        position: 19,
                        keepOrien: true,
                        width: 30,
                        height: 15,
                        names: ["toArrow"],
                      },
                    },
                  },
                },
                {
                  c: "ht.HtmlNode",
                  i: 1000006,
                  p: {
                    html: '<div class="system system-property system-yellow" data-index="0" title="1988年12月4日">1988年12月4日</div>',
                  },
                },
                {
                  c: "ht.Edge",
                  i: 1000007,
                  p: {
                    source: {
                      __i: 1000001,
                    },
                    target: {
                      __i: 1000006,
                    },
                  },
                  s: {
                    label: "下水时间",
                    "label.color": "gray",
                    "label.font": "6px arial",
                    "edge.width": 0.5,
                    "edge.color": "gray",
                    icons: {
                      toArrow: {
                        position: 19,
                        keepOrien: true,
                        width: 30,
                        height: 15,
                        names: ["toArrow"],
                      },
                    },
                  },
                },
                {
                  c: "ht.HtmlNode",
                  i: 1000008,
                  p: {
                    html: '<div class="system system-property system-yellow" data-index="0" title="29节">29节</div>',
                  },
                },
                {
                  c: "ht.Edge",
                  i: 1000009,
                  p: {
                    source: {
                      __i: 1000001,
                    },
                    target: {
                      __i: 1000008,
                    },
                  },
                  s: {
                    label: "航速",
                    "label.color": "gray",
                    "label.font": "6px arial",
                    "edge.width": 0.5,
                    "edge.color": "gray",
                    icons: {
                      toArrow: {
                        position: 19,
                        keepOrien: true,
                        width: 30,
                        height: 15,
                        names: ["toArrow"],
                      },
                    },
                  },
                },
                {
                  c: "ht.HtmlNode",
                  i: 10000010,
                  p: {
                    html: '<div class="system system-property system-yellow" data-index="0" title="瓦良格号">瓦良格号</div>',
                  },
                },
                {
                  c: "ht.Edge",
                  i: 10000011,
                  p: {
                    source: {
                      __i: 1000001,
                    },
                    target: {
                      __i: 10000010,
                    },
                  },
                  s: {
                    label: "前型",
                    "label.color": "gray",
                    "label.font": "6px arial",
                    "edge.width": 0.5,
                    "edge.color": "gray",
                    icons: {
                      toArrow: {
                        position: 19,
                        keepOrien: true,
                        width: 30,
                        height: 15,
                        names: ["toArrow"],
                      },
                    },
                  },
                },
                {
                  c: "ht.HtmlNode",
                  i: 10000012,
                  p: {
                    html: '<div class="system system-property system-yellow" data-index="0" title="尼古拉耶夫造船厂，大连造船厂">尼古拉耶夫造船厂，大连造船厂</div>',
                  },
                },
                {
                  c: "ht.Edge",
                  i: 10000013,
                  p: {
                    source: {
                      __i: 1000001,
                    },
                    target: {
                      __i: 10000012,
                    },
                  },
                  s: {
                    label: "制造厂",
                    "label.color": "gray",
                    "label.font": "6px arial",
                    "edge.width": 0.5,
                    "edge.color": "gray",
                    icons: {
                      toArrow: {
                        position: 19,
                        keepOrien: true,
                        width: 30,
                        height: 15,
                        names: ["toArrow"],
                      },
                    },
                  },
                },
                {
                  c: "ht.HtmlNode",
                  i: 10000014,
                  p: {
                    html: '<div class="system system-property system-yellow" data-index="0" title="50000吨以上">50000吨以上</div>',
                  },
                },
                {
                  c: "ht.Edge",
                  i: 10000015,
                  p: {
                    source: {
                      __i: 1000001,
                    },
                    target: {
                      __i: 10000014,
                    },
                  },
                  s: {
                    label: "满排吨位",
                    "label.color": "gray",
                    "label.font": "6px arial",
                    "edge.width": 0.5,
                    "edge.color": "gray",
                    icons: {
                      toArrow: {
                        position: 19,
                        keepOrien: true,
                        width: 30,
                        height: 15,
                        names: ["toArrow"],
                      },
                    },
                  },
                },
                {
                  c: "ht.HtmlNode",
                  i: 10000016,
                  p: {
                    html: '<div class="system system-property system-yellow" data-index="0" title="75米">75米</div>',
                  },
                },
                {
                  c: "ht.Edge",
                  i: 10000017,
                  p: {
                    source: {
                      __i: 1000001,
                    },
                    target: {
                      __i: 10000016,
                    },
                  },
                  s: {
                    label: "型宽",
                    "label.color": "gray",
                    "label.font": "6px arial",
                    "edge.width": 0.5,
                    "edge.color": "gray",
                    icons: {
                      toArrow: {
                        position: 19,
                        keepOrien: true,
                        width: 30,
                        height: 15,
                        names: ["toArrow"],
                      },
                    },
                  },
                },
                {
                  c: "ht.HtmlNode",
                  i: 10000018,
                  p: {
                    html: '<div class="system system-property system-yellow" data-index="0" title="被中国改装后现在中国人民解放军海军服役">被中国改装后现在中国人民解放军海军服役</div>',
                  },
                },
                {
                  c: "ht.Edge",
                  i: 10000019,
                  p: {
                    source: {
                      __i: 1000001,
                    },
                    target: {
                      __i: 10000018,
                    },
                  },
                  s: {
                    label: "现状",
                    "label.color": "gray",
                    "label.font": "6px arial",
                    "edge.width": 0.5,
                    "edge.color": "gray",
                    icons: {
                      toArrow: {
                        position: 19,
                        keepOrien: true,
                        width: 30,
                        height: 15,
                        names: ["toArrow"],
                      },
                    },
                  },
                },
                {
                  c: "ht.HtmlNode",
                  i: 10000020,
                  p: {
                    html: '<div class="system system-property system-green" data-index="0" title="1985年12月6日">1985年12月6日</div>',
                  },
                },
                {
                  c: "ht.Edge",
                  i: 10000021,
                  p: {
                    source: {
                      __i: 1000001,
                    },
                    target: {
                      __i: 10000020,
                    },
                  },
                  s: {
                    label: "建造时间",
                    "label.color": "gray",
                    "label.font": "6px arial",
                    "edge.width": 0.5,
                    "edge.color": "gray",
                    icons: {
                      toArrow: {
                        position: 19,
                        keepOrien: true,
                        width: 30,
                        height: 15,
                        names: ["toArrow"],
                      },
                    },
                  },
                },
              ],
            };
          }

          const json = [{
              label: "选择",
              action: function () {
                this.node.addStyleIcon("alarm", {
                  position: 24,
                  width: 18,
                  height: 18,
                  names: ["alarm-icon"],
                });
              },
            },
            {
              label: "取消选择",
              action: function () {
                this.node.removeStyleIcon("alarm");
              },
            },
          ];
          const contextmenu = new ht.widget.ContextMenu();
          contextmenu.enableGlobalKey();
          contextmenu.setLabelMaxWidth(200);
          contextmenu.addTo(view);
          contextmenu.beforeShow = function (e) {
            let node = graphView.getDataAt(e);

            if (
              node instanceof ht.HtmlNode &&
              node._attrObject.state &&
              node._attrObject.state == 4
            ) {
              this.setItems(json);
              this.node = node;
            } else {
              this.setItems(null);
            }
          };

          graphView.dm().deserialize(htData);
          let autoLayout = new ht.layout.AutoLayout(graphView);
          autoLayout.setAnimate(true);
          autoLayout.layout("circular", function () {
            graphView.fitContent(true);
          });
        });
      },
      jump(i) {
        this.checkList = [];
        this.$refs.node_all_check.innerHTML = "全选";
        if (i === undefined) {
          i = this.paginations.pageIndex;
        } else {
          this.paginations.pageIndex = i;
        }

        if (this.$route.query.dicLabelAttId) {
          this.isloading = true;
          // this.$store.dispatch('ajax', {
          this.$store.dispatch("ajaxSetting", {
            url: "/zonghe/api/comparison/queryMySqlTableDate",
            method: "get",
            data: {
              dicLabelAttId: this.$route.query.dicLabelAttId,
              page: i,
              number: this.paginations.pageSize,
            },
            succeed: (res) => {
              console.log(res);
              this.nodeList = res.rows;
              this.paginations.total = res.total;
              this.isloading = false;
            },
          });
        }
      },
      saveNode() {
        let data = [];
        for (const item of this.htData) {
          console.log(item);
          let temp = {
            labelName: item.labelName,
            '名称': item.name,
            id: item.id,
            // name: item.name,
            type: 1,
            // type: item.state,
          };
          for (const key in item.property) {
            const item2 = item.property[key];
              temp[key] = item2.value;
          }
          for (const key in item.property) {
            const item2 = item.property[key];
            if (item2.state == 1) {
              temp[key] = item2.value;
            }
          }
          data.push(temp);
        }

        if (data.length === 0) {
          this.$message.warning("请选择读取数据");
          return;
        }

        // console.log(this.htData, data);return;
        this.$store.dispatch("ajaxApi", {
          url: "/api/comparison/saveComparisonDate",
          method: "post",
          data: {
            data: data
          },
          succeed: () => {
            this.$message.success("导入成功");
          },
        });
      },
    },
    mounted: function () {
      ht.Default.setImage("toArrow", {
        width: 100,
        height: 50,
        comps: [{
            type: "shape",
            points: [2, 25, 30, 25],
            borderWidth: 1,
          },
          {
            type: "shape",
            points: [15, 5, 30, 25, 15, 45, 50, 25, 15, 5],
            background: "gray",
            borderWidth: 1,
          },
        ],
      });
      ht.Default.setImage("alarm-icon", {
        width: 100,
        height: 100,
        // opacity: { func: 'attr@alarm.opacity' },
        comps: [{
            type: "circle",
            rect: [2, 2, 96, 96],
            background: {
              value: "green",
              func: "attr@alarm.color",
            },
          },
          {
            type: "rect",
            rotation: Math.PI / 4,
            rect: [52, 30, 10, 40],
            background: "white",
          },
          {
            type: "rect",
            rotation: 90.1,
            rect: [35, 48, 10, 20],
            background: "white",
          },
        ],
      });

      this.jump(1);
    },
  };
</script>